<script setup>
import { Plus, Delete, InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { getAllUsers, getTaskModel, handOut, addNewTaskModel, delTaskModel } from '../api/api'
import { dateFormat, timeFormat } from '@/assets/tools'

const users = ref([])
const tasks = ref([])
const content = ref('')

const checkAllUsers = ref(false)
const checkedUsers = ref([])
const isIndeterminate_user = ref(true)
const handleCheckAllUsersChange = (val) => {
  checkedUsers.value = val ? users.value.map((i) => i.id) : []
  isIndeterminate_user.value = false
}
const handleCheckedUsersChange = (value) => {
  const checkedCount = value.length
  checkAllUsers.value = checkedCount === users.length
  isIndeterminate_user.value = checkedCount > 0 && checkedCount < users.length
}

const checkAllTasks = ref(false)
const checkedTasks = ref([])
const isIndeterminate_task = ref(true)
const handleCheckAllTasksChange = (val) => {
  checkedTasks.value = val ? tasks.value.map((i) => i.id) : []
  isIndeterminate_task.value = false
}
const handleCheckedTasksChange = (value) => {
  const checkedCount = value.length
  checkAllTasks.value = checkedCount === tasks.length
  isIndeterminate_task.value = checkedCount > 0 && checkedCount < tasks.length
}

const handoutTasks = async () => {
  // console.log(checkedUsers.value, checkedTasks.value)
  // console.log(
  //   tasks.value.filter((i) => checkedTasks.value.indexOf(i.id) > -1).map((i) => i.content)
  // )
  const contentList = tasks.value
    .filter((i) => checkedTasks.value.indexOf(i.id) > -1)
    .map((i) => i.content)

  const res = await handOut({
    userIds: checkedUsers.value.join(','),
    contentList: contentList.join(','),
    createTime: timeFormat(new Date()),
    deadline: dateFormat(new Date())
  })
  if (res.status) return ElMessage.warning('分发失败！')
  ElMessage.success('分发成功！')
  getTaskModels()
}

const add = async (content) => {
  const res = await addNewTaskModel({ content })
  if (res.status) return ElMessage.warning('新增到任务模板失败！')
  ElMessage.success('新增成功！')
  getTaskModels()
}

const del = async (id) => {
  const res = await delTaskModel({ params: { id } })
  if (res.status) return ElMessage.warning('删除失败！')
  ElMessage.success('删除成功！')
  getTaskModels()
}

const getUsers = async () => {
  const res = await getAllUsers()
  if (res.status) return ElMessage.warning('获取用户失败！')
  users.value = res.data
}

const getTaskModels = async () => {
  const res_ = await getTaskModel()
  if (res_.status) return ElMessage.warning('获取任务模板失败！')
  tasks.value = res_.data
}
onMounted(async () => {
  getUsers()
  getTaskModels()
})
</script>
<template>
  <main style="padding: 20px; height: 100%">
    <el-row :gutter="20" style="height: calc(100% - 44px)">
      <el-col :span="6">
        <el-checkbox
          v-model="checkAllUsers"
          :indeterminate="isIndeterminate_user"
          @change="handleCheckAllUsersChange"
        >
          全选成员
        </el-checkbox>
        <el-checkbox-group v-model="checkedUsers" @change="handleCheckedUsersChange">
          <el-checkbox v-for="user in users" :key="user.id" :label="user.name" :value="user.id">
            {{ user.name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-col>
      <el-col :span="18">
        <el-checkbox
          v-model="checkAllTasks"
          :indeterminate="isIndeterminate_task"
          @change="handleCheckAllTasksChange"
        >
          全选任务模板
        </el-checkbox>
        <div v-for="(row, index) in tasks" :key="index" class="fixed-item">
          <el-checkbox-group v-model="checkedTasks" @change="handleCheckedTasksChange">
            <el-checkbox :key="row.id" :value="row.id"> </el-checkbox>
          </el-checkbox-group>
          <div style="width: calc(100% - 60px)">{{ row.content }}</div>
          <el-popconfirm title="确认删除?" @confirm="del(row.id)">
            <template #reference>
              <el-button style="float: right" type="danger" :icon="Delete" circle />
            </template>
          </el-popconfirm>
        </div>
        <el-input v-model="content" style="height: 42px" placeholder="快速新增任务模板">
          <template #append>
            <el-button :icon="Plus" @click="add(content)" />
          </template>
        </el-input>
      </el-col>
    </el-row>
    <el-button
      type="primary"
      :icon="Plus"
      style="width: 100%; margin-bottom: 15px; height: 42px"
      @click="handoutTasks"
      >分发任务</el-button
    >
  </main>
</template>
<style lang="less" scoped>
.fixed-item {
  display: flex;
  background-color: #ede0ff;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 5px;
  line-height: 32px;
  .el-checkbox {
    margin-right: 10px;
  }
}
.el-input {
  --el-input-border-color: #ac6fff;
  --el-input-bg-color: transparent;
  --el-input-hover-border-color: #d8bdfc;
  --el-input-focus-border-color: #ac6fff;
  ::placeholder {
    color: #d8bcff;
  }

  /deep/ .el-input-group__append {
    background-color: #ede0ff;
    color: #ac6fff;
    font-weight: bold;
  }
}
</style>
